<template>
  <el-card shadow="never">
    <div slot="header" class="clearfix">
      <span>班级</span>
    </div>
    <el-row class="tams-search-container">
      <el-upload  class="upload-demo" ref="upload" action="http://localhost:8080/classExcel/upload"
      	:on-change="handleChange" :on-exceed="handleExceed" :on-remove="handleRemove"
      	:before-remove="beforeRemove" :file-list="fileListUpload" :limit="limitUpload"
      	accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      	:auto-upload="false">
      	<el-button type="primary" size="mini">导入班级数据</el-button>
      	<div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
      </el-upload>
      <a href="http://localhost:8080/classExcel/downloadTemplate">
      	<el-button  size="mini" icon="el-icon-download"></el-button>
      </a>
        <el-button type="primary" size="small" class="tams-operate-item" @click="saveClassVisible=true">新增</el-button>
    </el-row>

    <div v-loading="loading">
      <el-table stripe border :data="data">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="classId" label="编号"></el-table-column>
        <el-table-column prop="className" label="班级名称"></el-table-column>
        <el-table-column prop="classCount" label="座位数"></el-table-column>
<!--        <el-table-column
            fixed="right"
            label="操作"
            width="130">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showUpdate(scope.row.id)">编辑</el-button>
            <el-switch v-model="scope.row.enableState"
                       :active-value="1" :inactive-value="2"
                       active-color="#13ce66" inactive-color="#ff4949"
                       style="margin-left: 10px;"
                       @change="updateEnableState($event, scope.row.id)"></el-switch>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="$consts.PAGE_SIZES"
          :page-size="size"
          style="margin-top: 10px;"
          layout="total, sizes, prev, pager, next"
          :total="data.total">
      </el-pagination>
    </div>
    <SaveClass :visible="saveClassVisible"
                 @on-close="saveClassVisible=false"
                 @on-success="saveSuccess">
    </SaveClass>
    <UpdateClassroom :visible="updateClassroomVisible"
                   :id="id"
                   @on-close="updateClassroomVisible=false"
                   @on-success="updateSuccess">
    </UpdateClassroom>
  </el-card>
</template>
<script>
import { mapActions } from 'vuex'
import SaveClass from '@/views/class/SaveClass'
import UpdateClassroom from '@/views/classroom/UpdateClassroom'

export default {
  name: 'Classroom',
  components: { UpdateClassroom, SaveClass },
  data () {
    return {
      data: [],
      params: {},
      form: {},
      current: 1,
      size: 10,
      saveClassVisible: false,
      updateClassroomVisible: false,
      id: '',
      loading: false,
      fileListUpload: [],
      limitUpload: 1,
    }
  },
  methods: {
    ...mapActions(['GetClassroomPage', 'UpdateClassroomEnableStateById']),
    init () {
      this.params.enableState = 1
    },
    handleChange(file, fileList) {
    	// console.log(file)
    	this.fileTemp = file.raw;
    	if (this.fileTemp) {
    		// console.log(this.fileTemp.type)
    		if (this.fileTemp.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
    			this.fileTemp.type == "application/vnd.ms-excel") {
    			this.$refs.upload.submit();
    			this.$router.go(0)
    			// this.importExcel(this.fileTemp)
    		} else {
    			this.$message({
    				type: "warning",
    				message: "附件格式错误，请删除后重新上传!"
    			});
    		}
    	}

    },
    beforeRemove(file, fileList) {
    	return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
    	// console.log(file)
    	this.fileTemp = null;
    },
    handleExceed(files, fileList) {
    	this.$message.warning(
    		`当前限制选择1个文件，本次选择了 ${
    	          files.length
    	        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    	);
    },
    search () {
      this.$axios.get('http://localhost:8080/classExcel/selectClassAll', { params:{} }).then(res => {
        console.log(res.data)
        this.data=res.data
      })
    },
    handleSizeChange (val) {
      this.size = val
      this.search()
    },
    handleCurrentChange (val) {
      this.current = val
      this.search()
    },
    saveSuccess () {
      this.search()
      this.saveClassVisible = false
    },
    showUpdate (id) {
      this.id = id
      this.updateClassroomVisible = true
    },
    updateSuccess () {
      this.search()
      this.updateClassroomVisible = false
    },
    updateEnableState (enableState, id) {
      this.UpdateClassroomEnableStateById({ id, enableState }).then(res => {
        this.search()
      })
    }
  },
  mounted () {
    this.init()
    this.search()
  }
}
</script>

<style scoped>

</style>
